<template>
	<view>
		<view class="cars">
			<!-- 车子信息 -->
			<view class="cars_info">
				<u-tabs ref="tabs" :list="carList" active-color="#FD8900" inactive-color="#606266" font-size="30"
					:current="current" name="carType" @change="change">
				</u-tabs>
			</view>
			<!-- 下拉菜单显示车子信息 -->
			<!-- <view class="drop_cars_info" style="margin-top: 20rpx;">
					<u-icon name="list"  size="40" label="更多" @click="showCars()">更多</u-icon>
				</view> -->

			<!-- 宫格显示车辆信息 -->
			<template>
				<view v-if="isShow">
					<u-grid :col="3">

						<u-grid-item v-for="item in carList">
							<u-icon name="item.id" :size="46"></u-icon>
							<view class="grid-text">{{item.carType}}</view>
						</u-grid-item>
					</u-grid>
				</view>
			</template>
			<!-- //展示车辆的信息卡片 -->
			<template>

				<view class="container">
					<view class="left_car_pic">
						<image :src="carInfo.src" style="width: 360rpx; height: 280rpx;" mode="scaleToFill"></image>
					</view>

					<view class="right_car_info">
						<view class="detail">
							<p>载重:{{carInfo.carVolume}}吨 <u-icon name="more-circle" color="#2979ff"
									@click="gotoCarInfo(carInfo.businessId)" size="28" label="详情"
									style="margin-left: 20rpx;"></u-icon>
							</p>
						</view>
						<view class="detail">
							<p>长宽高:{{carInfo.carVolume}}米</p>
						</view>
						<view class="detail">
							<p>载货体积:{{carInfo.carLwh}}方</p>
						</view>
					</view>
				</view>
			</template>

			<!-- //填写货物信息 -->
			<template>
				<view class="" style="width: 100%;">
					<u-popup v-model="show" mode="bottom">
						<u-form :model="moodForm" ref="uForm" class="form">
							<u-form-item label-position="left" label="送货标题" label-width="150" :required="true">
								<u-input v-model="moodForm.orderName" />
							</u-form-item>
							<u-form-item label-position="left" label="发货人姓名" label-width="150" :required="true">
								<u-input v-model="moodForm.customerName" />
							</u-form-item>
							<u-form-item label-position="left" label="发货人电话" label-width="150" :required="true">
								<u-input v-model="moodForm.customerTel" />
							</u-form-item>
							<u-form-item label-position="left" label="收货人姓名" label-width="150" :required="true">
								<u-input v-model="moodForm.consigneeName" />
							</u-form-item>
							<u-form-item label-position="left" label="收货人电话" label-width="150" :required="true">
								<u-input v-model="moodForm.consigneeTel" />
							</u-form-item>
							<u-form-item label-position="left" label="货物重量kg" label-width="150" :required="true">
								<u-input v-model="moodForm.goodsWeight" />
							</u-form-item>
							<u-form-item label-position="left" label="货物名称" label-width="150" :required="true">
								<u-input v-model="moodForm.goodsName" />
							</u-form-item>
							<u-form-item label-position="left" label="备注" label-width="150" :required="true">
								<u-input v-model="moodForm.orderRemarks" />
							</u-form-item>
							<u-form-item label-position="left" label="货物类型" prop="moodType" label-width="150"
								:required="true">
								<u-input border="border" type="select" :select-open="selectShow"
									v-model="moodForm.moodType" placeholder="请选择获取类型" @click="selectShow = true">
								</u-input>
							</u-form-item>
							</u-form-item>
							<u-button type="default" shape="circle" size="mini" @click="show = false">取消确认</u-button>
							<u-button type="success" shape="circle" size="mini" @click="confirmInfo">确认信息</u-button>
						</u-form>
						</u-form>
					</u-popup>
					<u-cell-group>
						<u-cell-item @click="show = true" icon="setting-fill" title="填写送货信息"></u-cell-item>
					</u-cell-group>
				</view>
			</template>
			<!-- //填写备注信息 -->

			<u-form :model="moodForm" ref="uForm" style="width: 80%; position: relative;text-align: center;">
				<u-form-item label-position="left" label="上货地址" label-width="150"><text style="width: 100%;"
						@click="showMapHandel(0)">{{moodForm.fromText}}</text></u-form-item>
				<u-form-item label-position="left" label="目的地址" label-width="150"><text style="width: 100%;"
						@click="showMapHandel(1)">{{moodForm.toText}}</text></u-form-item>
			</u-form>

			<!-- //选择获取货物类型选择框 -->
			<u-button type="primary" @click="openPop" class="now">现在用车</u-button>
			<!-- <u-button type="primary"  style="background-color: #FD8900;" @click="order()">预约</u-button> -->
			<u-select mode="single-column" :list="moodTypeList" v-model="selectShow" @confirm="selectConfirm"
				value-name="typeId" label-name="typeName"></u-select>
		</view>
		<mi-map v-if="showMap" @seladdress="seladdress"></mi-map>
		<template>
			<view>
				<u-popup v-model="showPop" mode="center">
					<view style="width: 100%">
						<u-card title="确认你的发货信息">
							<view class="" slot="body">
								<view class="">
									<span>拉货点：</span>
									<span style='float: right;'>{{moodForm.fromText}}</span>
								</view>
								<u-line color="black" />
								<view class="">
									<span>收货点：</span>
									<span style='float: right;'>{{moodForm.toText}}</span>
								</view>
								<u-line color="black" />
								<view class="">
									<span>发货人：</span>
									<span style='float: right;'>{{moodForm.customerName}}</span>
								</view>
								<u-line color="black" />
								<view class="">
									<span>发货人电话：</span>
									<span style='float: right;'>{{moodForm.customerTel}}</span>
								</view>
								<u-line color="black" />
								<view class="">
									<span>收货人：</span>
									<span style='float: right;'>{{moodForm.consigneeName}}</span>
								</view>
								<u-line color="black" />
								<view class="">
									<span>收货人电话：</span>
									<span style='float: right;'>{{moodForm.consigneeTel}}</span>
								</view>
								<u-line color="black" />
								<view class="">
									<span>运货距离：</span>
									<span style='float: right;'>{{moodForm.orderDistance}}Km</span>
								</view>
								<u-line color="black" />

								<view class="">
									<span>运费预估：</span>
									<span style='float: right;'>{{moodForm.freightAmount}}</span>
								</view>
								<u-line color="black" />
								<view class="">
									<span>优惠券：</span>
									<span style='float: right;'>{{moodForm.coupon}}</span>
								</view>
								<u-line color="black" />
								<view class="">
									<span>最总支付：</span>
									<span style='float: right;'>{{moodForm.freightAmount}}</span>
								</view>
								<u-line color="black" />
							</view>
							<view class="" slot="foot">
								<u-button @click="showPop=false">取消确认</u-button>
								<u-button @click="pickUpGoodsNow">确认送货信息</u-button>
							</view>
						</u-card>
					</view>

				</u-popup>
			</view>
		</template>
	</view>
</template>

<script>
	import miMap from '@/components/user-map/mi-map.vue'
	import {
		createOrder,
		gerCarInfoById,
		gerCarList,
		gerMoney,
		getMoodTypeList
	} from "../../../../api/user/user";
	import {
		mapGetters
	} from 'vuex'
	import carInfo from "./carInfo/carInfo";
	export default {
		data() {
			return {
				showPop: false,
				moodTypeList: [],
				showMap: false,
				addressType: 0,
				background: {
					'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				carList: [

				],
				carInfo: {},
				current: 0,
				isShow: false,
				show: false,
				selectShow: false,
				othershow: false,
				moodType: {
					goodsName: '',
					typeID: null,
					goodsWeight: 12
				},
				moodForm: {
					userId: '',
					//订单价格
					freightAmount: 0,
					//单位千米
					orderDistance: 10,
					goodsName: '',
					typeId: '',
					goodsWeight: '',
					orderRemarks: "",
					carId: '',
					typeName: '',
					//货物类型
					moodType: '',
					//货物类型id
					goodsId: '',
					//上货地址
					fromText: '点击定位收获位置',
					latitude: '',
					longitude: '',
					toLatitude: '',
					toLongitude: '',
					toText: '点击定位收获地址',
					//发货人
					customerName: '',
					//发货人联系方式
					customerTel: '',
					//收货人
					consigneeName: '',
					//收货人联系方式
					consigneeTel: '',
					//送货标题：
					orderName: '',
				},
			}
		},

		onLoad() {

		},
		mounted() {
			this.moodForm.userId = this.userID;
			this.getCarList();
			this.getTypeList();
		},
		components: {
			miMap
		},
		computed: {
			...mapGetters([
				'userID',
				'name',
				'phone'
			])
		},
		created() {
			this.moodForm.customerTel = this.phone
			this.moodForm.consigneeTel = this.phone
			this.moodForm.customerName = this.name
			this.moodForm.consigneeName = this.name
			this.moodForm.orderName = this.name + '的订单'
		},
		methods: {
			gotoCarInfo(id) {
				uni.navigateTo({
					url: '/pages/index/component/pickUpGoods/carInfo/carInfo?id=' + id
				})
			},
			confirmInfo() {
				if (this.moodForm.consigneeTel == ''||this.moodForm.customerTel == '') {
					uni.showToast({
						title: '请完成联系人信息',
						duration: 2000
					});
					return;
				}
				if(!(/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.moodForm.consigneeTel))||!(/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.moodForm.customerTel))){
					uni.showToast({
						title: '手机号有误',
						duration: 2000
					});
					return false;
				}
				if (this.moodForm.typeId == '') {
					uni.showToast({
						title: '请选择货物类型',
						duration: 2000
					});
					return;
				}
				
				if (this.moodForm.goodsWeight == '') {
					uni.showToast({
						title: '请填写货物信息',
						duration: 2000
					});
					return;
				}
				this.show = false
			},
			openPop() {
				if (this.moodForm.toLongitude == '' || this.moodForm.longitude == '') {
					uni.showToast({
						title: '请填入地址',
						duration: 2000
					});
					return;
				};
				this.showPop = true;
				console.log(this.moodForm);
				this.getDistance(this.moodForm.latitude, this.moodForm.longitude, this.moodForm.toLatitude, this.moodForm
					.toLongitude);
				this.getMoney();
			},
			getTypeList() {
				getMoodTypeList().then(res => {
					console.log(res);
					this.moodTypeList = res.body;
				})
			},
			getCarList() {
				gerCarList().then(res => {
					this.carList = res.body
					this.change(0)
				});
			},
			showMapHandel(type) {
				this.addressType = type
				this.showMap = true
			},
			// //获取两点距离
			// getDistance(longitude1, latitude1, longitude2, latitude2){
			// 	// 维度
			// 	const lat1 = (Math.PI / 180) * latitude1;
			// 	const lat2 = (Math.PI / 180) * latitude2;
			// 	// 经度
			// 	const lon1 = (Math.PI / 180) * longitude1;
			// 	const lon2 = (Math.PI / 180) * longitude2;
			// 	// 地球半径
			// 	const R = 6371;
			// 	// 两点间距离 km，如果想要米的话，结果*1000就可以了
			// 	const d = Math.acos(Math.sin(lat1) * Math.sin(lat2) + Math.cos(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1)) * R;
			// 	const away=d*1000;
			// 	this.moodForm.orderDistance=away;
			//  },
			getDistance(e1, n1, e2, n2) {
				const R = 6371
				const {
					sin,
					cos,
					asin,
					PI,
					hypot
				} = Math

				/** 根据经纬度获取点的坐标 */
				let getPoint = (e, n) => {
					e *= PI / 180
					n *= PI / 180
					//这里 R* 被去掉, 相当于先求单位圆上两点的距, 最后会再将这个距离放大 R 倍
					return {
						x: cos(n) * cos(e),
						y: cos(n) * sin(e),
						z: sin(n)
					}
				}
				let a = getPoint(e1, n1)
				let b = getPoint(e2, n2)
				let c = hypot(a.x - b.x, a.y - b.y, a.z - b.z)
				let r = asin(c / 2) * 2 * R

				r=r.toFixed(2)
				this.moodForm.orderDistance = r;
				return r
			},
			//计算价格
			getMoney() {
				let param = {
					"orderDistance": this.moodForm.orderDistance,
					"carId": this.moodForm.carId
				};
				gerMoney(param).then(res => {
					this.moodForm.freightAmount = res.body;
					console.log(res)
				});
			},
			seladdress(e) {
				console.log(e);
				this.showMap = false
				if (this.addressType == 0) {
					console.log('1');
					this.moodForm.fromText = e.address
					this.moodForm.latitude = e.latitude
					this.moodForm.longitude = e.longitude
				} else {
					console.log('0');
					this.moodForm.toText = e.address
					this.moodForm.toLatitude = e.latitude
					this.moodForm.toLongitude = e.longitude
				}
				console.log(this.moodForm);
			},
			chose(index) {
				//点击了找单还是拉货
				console.log(this.current);
			},
			change(index) {
				//点击了tab选项卡的那个下标位置
				this.current = index;
				var id = index + 1;
				gerCarInfoById(id).then(res => {
					console.log(res)
					this.carInfo = res.body
				})
				this.moodForm.carId = id;
			},
			showCars() {
				//隐藏或显示车辆信息宫格表
				this.isShow = !this.isShow;
			},
			// 选择货物类型回调
			selectConfirm(e) {
				console.log(e)
				this.moodForm.moodType = '';
				e.map((val, index) => {
					this.moodForm.moodType += this.moodForm.moodType == '' ? val.label : '-' + val.label;
					//保存货物id信息
					this.moodForm.typeName = val.label;
					this.moodForm.typeId = val.value;
				})
			},
			//现在用车
			pickUpGoodsNow() {

				if (this.moodForm.userId == '') {
					uni.showToast({
						icon: 'warning',
						title: '请先去登录',
						duration: 2000
					});
					return;
				}
				this.showPop = false;
				this.showLoading();
				createOrder(this.moodForm).then(res => {
					//添加订单成功
					if (res.header.code == 200) {
						this.moodForm = {};
						this.$u.toast("订单生成成功，去订单页面查看吧")
						// uni.showToast({
						// 	icon: 'success',
						// 	title: '订单生成成功，去订单页面查看吧',
						// 	duration: 2000
						// });
					} else {
						uni.showToast({
							icon: 'error',
							title: '订单生成失败',
							duration: 2000
						});
					}
					this.hideLoading();
				});

			},
			showLoading: function() {
				uni.showLoading({
					title: 'loading'
				});
			},

			hideLoading: function() {
				uni.hideLoading();
			},
			//预约
			order() {
				uni.showToast({
					icon: 'none',
					title: '已加入订单，可在订单中查看',
					duration: 2000
				});
			},
		}
	}
</script>

<style>
	.form {
		padding: 0 20rpx;
	}

	.now {
		margin-bottom: 30rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.selector_way {
		height: auto;
		width: 100%;
		background-color: #18B566;

	}

	.button_hover:hover {
		background-color: #DD6161;
	}

	.cars {
		width: 100%;
		position: relative;

	}

	.cars_info {
		width: 100%;
		height: auto;
		float: left;
	}

	.drop_cars_info {
		text-align: center;
		width: 20%;
		float: left;
	}

	.container {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.left_car_pic {

		height: 300rpx;
		width: 300rpx;
		margin-top: 20rpx;
		border-radius: 15rpx;
	}

	.right_car_info {
		width: 40%;
		height: 300rpx;
	}

	.detail {
		text-align: center;
		font-weight: bold;
		color: #82848A;
		margin-top: 30rpx;
	}
</style>
